<template>
	<view class="box">
		<comHeader :config="navConfig" />
		<view class="main">
			<view class="tips">
				<view>
					<image class="miteimg" src="../../../static/success.png" mode=""></image>
				</view>
				<view class="tipssize">您已取号成功</view>
			</view>
			<view class="centent">
				<view class="distance">
					<view class="disfiex">
						<view class="sizetitle">
							<view class="sizecolora">我的号码</view>
							<view class="sizecolorb" @click="a">小桌A04</view>
						</view>
						<view class="sizetitle">
							<view class="sizecolorc" v-if="state==false">排队进度提醒</view>
							<view class="sizecolord" v-if="state==false">
								<switch color="#74C146" @change="switch2Change"/>
								<view class="modification" :class="{'zindex':target==true}"  @click="quxiao"></view>
							</view>
							<view class="cancelimg"  v-if="state==true">
								<image src="../../../static/cancel.png"></image>
							</view>
						</view>
					</view>
					<view class="maincolor">前面还有<text style="color:#3589F6;">2</text>桌</view>
					<view class="maincolora">预计还需等待16分钟</view>
					<view class="tail">
						<view class="tailtitle">已等时长：<text class="tailtext">0分钟</text></view>
						<view class="tailtitle">预订用户：<text class="tailtext">张</text></view>
						<view class="tailtitle">手机号码：<text class="tailtext">012323</text></view>
						<view class="tailtitle">取号时间：<text class="tailtext">2019-11-22 18:12</text></view>
						<view class="tailtitle">取号渠道：<text class="tailtext">在线取号</text></view>
					</view>
				</view>
			</view>
			<!-- <view class="buttonline" :class="{'buttonbackcolora': state==true,'buttonbackcolorb': state==false}">
				<text v-show="state==false" @click="bunstate" >取消排队</text>
				<text v-show="state==true" @click="bunstatea">继续排队</text>
			</view> -->
			<view class="buttonline buttonbackcolorb" v-show="state==false" @click="bunstate">
				<text>取消排队</text>
			</view>
			<view class="buttonline buttonbackcolora" v-show="state==true" @click="bunstatea">
				<text>继续排队</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state:false,
				target:false,
				navConfig: {
					isFixed: false,
					comScroll: 0,
					left: {
						text: '',
						isShowLeft: true,
						leftGobackColor: '#ffffff',
						leftTextColor: '',
					},
					mid: {
						isShowMid: true,
						text: '新韩小馆烤肉'
					},
					right: {
						text: '',
						isShowRight: false,
					}
				},
			}
		},
		watch:{
		},
		methods: {
			quxiao() {
				let thix = this
				if(this.target == true){
					uni.showModal({
						title: '确定关闭排队提醒？',
						content: '关闭后，您将无法获得排队进度提醒',
						success: function(res) {
							if (res.confirm) {
								thix.switch2Change()
								thix.target = false
							} else if (res.cancel) {
							}
						}
					});
				}
			},
			switch2Change(e) {
				console.log(666);
				let thix = this
				if(thix.target == false){
					thix.target = e.target.value
					console.log(thix.target)
				}else{
					console.log(999);
				}
			},
			bunstate(){
				let thix = this
				uni.showModal({
					title:'取消排队？',
					content: '确定取消排队吗？',
					success: function(res) {
						if (res.confirm) {
							thix.state = true;
						} else if (res.cancel) {
						}
					}
				});
			},
			bunstatea(){
				this.state = false;
			}
		}
	}
</script>

<style>
	.box {
		width: 100vw;
		height: 100vh;
	}

	.main {
		padding-top: 150upx;
	}

	.tips {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20upx 0upx 50upx 0upx;
	}

	.tipssize {
		font-size: 38upx;
		margin-left: 30upx;
	}

	.miteimg {
		width: 113upx;
		height: 96upx;
	}

	.centent {
		width: 95%;
		box-shadow: 0px 0px 10px 6px #f1f3fe;
		border-radius: 10upx;
		margin: auto;
		background-color: #FFFFFF;
	}

	.distance {
		width: 93%;
		z-index: 1;
		margin: auto;
	}

	.disfiex {
		display: flex;
		justify-content: space-between;
	}

	.sizetitle {
		margin-top: 46upx;
	}

	.sizecolora {
		color: #000000;
		font-size: 32upx;
	}

	.sizecolorb {
		color: #3589F6;
		font-size: 50upx;
		margin-top: 38upx;
	}

	.sizecolorc {
		font-size: 24upx;
		color: #666666;
	}

	.sizecolord {
		margin-top: 33upx;
		position: relative;
	}

	.maincolor {
		font-size: 28upx;
		color: #000000;
		margin-top: 40upx;
	}

	.maincolora {
		font-size: 28upx;
		color: #666666;
		margin-top: 25upx;
	}

	.tail {
		margin-top: 67upx;
		color: #666666;
		font-size: 28upx;
		padding-bottom: 50upx;
	}

	.tailtitle {
		margin-top: 16upx;
	}

	.tailtext {
		margin-left: 15upx;
	}
	.buttonline{
		width: 499upx;
		height: 80upx;
		line-height: 80upx;
		margin: auto;
		color: #FFFFFF;
		text-align: center;
		margin-top: 189upx;
		border-radius: 30upx;
		font-size: 32upx;
	}
	.buttonbackcolora{
		background: linear-gradient(to bottom, #4C89D8, #2A60BA);
	}
	.buttonbackcolorb{
	background-color: #DAD9D9;
	}
	.modification{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		z-index: -1;
	}
	.zindex{
		z-index: 9999999999;
	}
	.cancelimg{
		border: 1upx  dashed #AFB0B2 ;
		width: 193upx;
		height: 158upx;
	}
	.cancelimg image{
		width: 193upx;
		height: 158upx;
	}
</style>
